<template>
  <div>

    <div class="home">
      <!-- 导航 -->
      <div class="container-fluid navBar" :class="this.$route.path=='/index'?'':'white'">
        <div class="logo col-md-2 col-6 d-none d-md-block">
          <img :src="this.$route.path == '/index'?'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/a044b4b5-3dac-43e5-be04-97faf7b64662.png':'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/e4f29663-f991-41ec-b371-bbc2d7bfebab.png'" />
        </div>
        <div class="navItem col-md-4 md-offset-6  d-none d-md-block">
          <ul>
            <li @click="goto('index')"><a href="#">首页</a></li>
            <li @click="goto('product')"><a href="#">产品</a></li>
            <li @click="goto('Custom')"><a href="#">定制</a></li>
            <li @click="goto('Case')"><a href="#">案例</a></li>
            <li @click="goto('about')"><a href="#">关于</a></li>
          </ul>
        </div>
      </div>
      <!-- 小屏幕导航 -->
      <div class="container-fluid smallNav d-md-none">
        <div class="logo col-4">
          <!-- http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/a044b4b5-3dac-43e5-be04-97faf7b64662.png -->
          <img src="http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/a044b4b5-3dac-43e5-be04-97faf7b64662.png" />
        </div>
        <div class="btn" @click="open">
          <svg t="1596626716734" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1169" width="20" height="20">
            <path d="M937.386667 488.106667L772.266667 372.48c-12.8-9.386667-30.293333-6.826667-40.106667 5.546667-3.84 4.693333-5.546667 10.666667-5.546667 17.066666v233.813334c0 22.613333 25.6 36.693333 45.653334 22.613333l165.546666-115.626667c14.08-14.08 14.08-36.693333-0.426666-47.786666zM914.346667 213.333333h-785.066667c-18.773333 0-34.133333-15.36-34.133333-34.133333s15.36-34.133333 34.133333-34.133333h785.066667c18.773333 0 34.133333 15.36 34.133333 34.133333s-14.933333 34.133333-34.133333 34.133333zM914.346667 878.933333h-785.066667c-18.773333 0-34.133333-15.36-34.133333-34.133333s15.36-34.133333 34.133333-34.133333h785.066667c18.773333 0 34.133333 15.36 34.133333 34.133333s-14.933333 34.133333-34.133333 34.133333zM624.213333 435.2h-494.933333c-18.773333 0-34.133333-15.36-34.133333-34.133333s15.36-34.133333 34.133333-34.133334h494.933333c18.773333 0 34.133333 15.36 34.133334 34.133334s-14.933333 34.133333-34.133334 34.133333zM624.64 657.066667H129.28c-18.773333 0-34.133333-15.36-34.133333-34.133334s15.36-34.133333 34.133333-34.133333h495.36c18.773333 0 34.133333 15.36 34.133333 34.133333v0.426667c-0.426667 18.346667-15.36 33.706667-34.133333 33.706667z" fill="#ffffff" p-id="1170"></path>
          </svg>
        </div>
        <div class="panle" ref="panle">
          <ul>
            <li @click="goto('index')"><a href="#">首页</a></li>
            <li @click="goto('product')"><a href="#">产品</a></li>
            <li @click="goto('Custom')"><a href="#">定制</a></li>
            <li @click="goto('Case')"><a href="#">案例</a></li>
            <li @click="goto('about')"><a href="#">关于</a></li>
          </ul>
        </div>
      </div>

    </div>
    <!-- 页面主体 -->
    <div>
      <router-view></router-view>
    </div>
    <!-- 脚部 -->
    <div class="footer container-fluid d-none d-md-block">
      <div class="row justify-content-around">
        <div class="col-md-4">
          <p class="left">深圳中科鑫智有限公司</p>
          <p class="left">©2007-2018 javamall,Inc.All rights reserved.</p>
        </div>
        <div class="col-md-4">
          <p class="right">公司地址：深圳市南山区粤海街道豪威科技大厦13楼A08</p>
          <p class="right">电话：188 1411 4118</p>
        </div>
      </div>
    </div>
    <div class="footer container-fluid d-md-none footer-small">
      <div class="row justify-content-around">
        <div class="col-md-12">
          <p class="left">深圳中科鑫智有限公司</p>
          <p class="left">©2007-2018 javamall,Inc.All rights reserved.</p>
          <p class="left">公司地址：深圳市南山区粤海街道豪威科技大厦13楼A08</p>
          <p class="left">电话：188 1411 4118</p>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      checkOpen: false
    }
  },
  created() {
    console.log(this.$route.path)
  },
  methods: {
    goto(url) {
      this.$refs.panle.style.height = "0"
      this.checkOpen = false
      this.$router.push({ name: url })
    },
    open() {
      if (!this.checkOpen) {
        this.$refs.panle.style.height = "25rem"
        
        this.checkOpen = true
      } else {
        this.$refs.panle.style.height = "0"
        this.checkOpen = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.white {
  background-color: #ffffff !important;
  position: relative !important;
  .navItem {
    ul {
      li {
        a {
          color: #000000 !important;
        }
      }
    }
  }
}
.navBar {
  z-index: 9998;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  // background-color: #5dd0db;
  justify-content: space-between;
  .logo {
    img {
      width: 80%;
      display: inline-block;
    }
  }
  .navItem {
    ul {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        cursor: pointer;
        // transition: all 0.3s;
        width: 100%;
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
        list-style: none;
        // text-decoration: none;
        a {
          text-decoration: none;
          color: #ffffff;
          display: inline-block;
        }
      }
      li:hover {
        border-bottom: 2px solid #ffffff;
      }
    }
  }
}
.smallNav {
  z-index: 9998;
  width: 100%;
  height: 4rem;
  background-color: #5cd0db;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  // margin-bottom: 5rem;
  .logo {
    img {
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
  .btn{
    display: flex;
    align-items: center;
  }
  .panle {
    position: absolute;
    top: 4rem;
    left: 0;
    width: 100%;
    height: 0rem;
    overflow: hidden;
    background-color: #5cd0db;
    transition: all 0.8s;
    // display: none;
    // opacity: 0;
    ul {
      margin: 0 0;
      padding: 0 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      li {
        transition: all 0.8s;
        display: flex;
        cursor: pointer;
        justify-content: center;
        list-style: none;
        padding: 5px 0;
        box-sizing: border-box;
        a {
          color: #ffffff;
          text-decoration: none;
          font-size: 1.8rem;
        }
      }
    }
  }
}
.footer {
  padding: 3.1875rem;
  background-color: #5cd0db;
}
.footer-small {
  margin-top: 15rem;
  p {
    padding: 0 5rem;
    font-size: 1.5rem;
  }
}
.left {
  text-align: left;
  color: #ffffff;
}
.right {
  text-align: right;
  color: #ffffff;
}
</style>